<template>
  <div class="category clearfix fix">
    <!--<div class="navBar">-->
      <!--&lt;!&ndash;<div class="back" @click="prevPage">&ndash;&gt;-->
        <!--&lt;!&ndash;<span class="iconfont icon-Left"></span>&ndash;&gt;-->
        <!--&lt;!&ndash;&lt;!&ndash;<span>返回</span>&ndash;&gt;&ndash;&gt;-->
      <!--&lt;!&ndash;</div>&ndash;&gt;-->
      <!--<div class="pageName">-->
        <!--产品分类-->
      <!--</div>-->
      <!--<span></span>-->
    <!--</div>-->
    <div class="sideBar">
      <ul>
        <li :class="activeIndex == 0? 'active': ''" @click="handleTouchTab(0)">
          <span style="color: #FF6B01; font-weight: 600;">全部分类</span>
        </li>
        <li v-for="(category, index) in categoryList" :class="activeIndex == (index+1)? 'active': ''" @click="handleTouchTab((index+1), category.id)">
          <span>{{category.name}}</span>
        </li>
      </ul>
    </div>

    <div class="content">
      <div class="top">
        <span>产品分类</span>
        <span @click="checkProducts(0)">全部产品 <i class="iconfont icon-right"></i></span>
      </div>
      <div class="scroll-container" ref="scrollContainer">
        <ul >
          <li v-for="secCategory in secCategoryList" @click="checkProducts(secCategory.id)">
            <img src="../../assets/images/product.jpg" alt="">
            <p class="name">{{secCategory.name}}</p>
          </li>
        </ul>
      </div>

    </div>
  </div>
</template>

<script>
  import { getCategory, getSecCategory } from '../../api/getCategory'

  export default {
    name: 'category',
    data () {
      return {
        activeIndex: 0,
        isReturnTopShow: false,
        box: null,
        categoryList: [],
        secCategoryList: []
      }
    },
    created () {
      this.getMainCategory()
      this.getSecondCategory()
    },
    mounted () {
      this.box = this.$refs.scrollContainer
      this.box.addEventListener('scroll', () => {
        console.log('scroll' + this.$refs.scrollContainer.scrollTop)
        console.log(window.innerHeight)
        this.isReturnTopShow = this.box.scrollTop > window.innerHeight / 2
      })
    },
    methods: {
      getMainCategory () {
        getCategory().then(res => {
          // console.log(res)
          this.categoryList = res.items
        })
      },
      getSecondCategory (parentId) {
        var param
        if (parentId) {
          param = { parent_id: parentId }
        } else {
          param = {}
        }
        getSecCategory(param).then(res => {
          console.log(res)
          this.secCategoryList = res.items
        })
      },
      handleTouchTab (index, parentId) {
        this.activeIndex = index
        this.getSecondCategory(parentId)
      },
      checkProducts (id) {
        this.$router.push({
          path: `/products/${id}`
        })
      },
      prevPage () {
        this.$router.go(-1)
      },
      pageTop () {
        // this.box.scrollTop = 0
        var scrolling = setInterval(() => {
          this.box.scrollTop -= 10
          if (this.box.scrollTop <= 0) {
            clearInterval(scrolling)
            scrolling = null
          }
        }, 5)
      }
    }
  }
</script>

<style scoped lang="less">
  .category {
    background: #f5f5f5;
    position: relative;
    height: 100vh;
    overflow: hidden;
    .sideBar {
      /*padding-top: 45px;*/
      box-sizing: border-box;
      width: 80px;
      background: #fff;
      font-size: 12px;
      height: 100%;
      float: left;
      border-right: 1px solid #eeeeee;
      li {
        padding: 15px 10px;
        text-align: center;
        box-sizing: border-box;
        height: 53px;
        span {
          display: inline-block;
          line-height: 23px;
          height: 23px;
          overflow: hidden;
        }
        &.active {
          background-color: #f5f5f5;
          border-left: 2px solid #FF6B01;
          color: #FF6B01;
        }
      }
    }
    .content {
      box-sizing: border-box;
      padding-top: 45px;
      padding-bottom: 10px;
      position: relative;
      height: 100%;
      overflow: hidden;
      margin-left: 90px;
      margin-right: 10px;
      .top {
        position: absolute;
        padding: 0 5px;
        box-sizing: border-box;
        top: 10px;
        left: 0;
        width: 100%;
        font-size: 14px;
        line-height: 25px;
        /*margin-left: 95px;*/
        /*margin-top: 55px;*/
        display: flex;
        align-items: center;
        justify-content: space-between;
        /*margin-right: 15px;*/
        span:first-child {
          font-weight: 600;
          color: #555;
        }
        span:last-child {
          color: #666;
          font-size: 12px;
          color: #FF6B01;
        }
      }
      .scroll-container {
        overflow: scroll;
        max-height: 100%;
        background-color: #fff;
        /*margin-top: 10px;*/
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 8px;
        border: 1px solid #f2f2f2;
        &::-webkit-scrollbar {
          display: none;
        }
        ul {
          padding: 15px;
          padding-bottom: 0;
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;
          li {
            width: 48%;
            box-sizing: border-box;
            margin-bottom: 10px;
            box-shadow: 0 0 10px 1px rgba(0,0,0,.05);
            /*border: 1px solid #f5f5f5;*/
            /*background-color: #f5f5f5;*/
            border-radius: 5px;
            overflow: hidden;
            img {
              width: 100%;
            }
            .name {
              font-size: 13px;
              text-align: center;
              color: #666;
              margin-top: 5px;
              margin-bottom: 5px;
              line-height: 20px;
              height: 20px;
              overflow: hidden;
              padding: 0 15px;
            }
          }
        }
      }

      /*box-shadow: 0 0 10px 1px rgba(0,0,0,.05);*/

    }
  }



</style>
